<template>
    <div class="config_set">
        <div class="title-info">
            <span>魔方活动支持使用第三方推送发送信息，只需简单配置</span> 
            <el-button type="primary" class="float-right add-btn" @click="addSet" v-show="addTbnShow">新增配置</el-button>
        </div>
        <div class="content">
            <div class="group" v-for="(item,index) in groupList" :key="index">
                <p class="item-list">
                    <el-select v-model="item.select"  placeholder="请选择">
                        <el-option
                        v-for="item in optionsClass"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                </p>
                <p class="item-list">
                    <el-input v-model="item.app_key" placeholder="appKey"></el-input>
                </p>

                <p class="item-list">
                    <el-input v-model="item.master_sercet" placeholder="masterSercet"></el-input>
                </p>

                <p class="item-list">
                    <el-button type="primary" @click="updatePushConfig(index)">{{groupList[index].id ? '更新' : '绑定'}}</el-button>
                </p>
                <p class="item-list delete-icon">
                    <i class="el-icon-close cursor" @click="deleteSetList(index)" v-show="groupList.length!=1"></i>
                </p>

            </div>
        </div>
    </div>
</template>

<script>
	import * as api from './../../api/api';
    import Vue from 'vue';
export default {
    data(){
        return {
            groupList:[{
                select:'',
                app_key:'',
                master_sercet:'',
            }],
            optionsClass: [{
                value: 1,
                label: '极光推送'
            }],
            addTbnShow:true,
        }
    },
    mounted(){
        this.fetchList();
    },
    computed: {

    },
    methods: {
        //获取推送设置内容
        fetchList(){
            api.getPushConfig().then(res=>{
                let tableData = res.data.data;
                this.groupList = [];
                //   for (const item of tableData) {
                    let oneList = {};
                    oneList.id = tableData.id;
                    oneList.select = tableData.type;
                    oneList.app_key = tableData.appkey;
                    oneList.master_sercet = tableData.master_sercet;
                    this.groupList.push(oneList);
                //   }
                this.$message({showClose: true,message: '获取配置成功！'});
            })
        },
        //添加
        addSet(){
            if(this.groupList.length<3){
                this.groupList.push({select:'', app_key:'', master_sercet:'',});
            }
            if(this.groupList.length==3){
                this.addTbnShow=false;
            }
        },
        //删除
        deleteSetList(index){
            if(this.groupList.length>1){
                this.addTbnShow=true;
               Vue.delete(this.groupList, index);
            }   
        },
        //更新推送设置
        updatePushConfig(index){
            let data = this.groupList[index];
            let type = data.select;
            let appkey = data.app_key;
            let master_sercet = data.master_sercet;
            let body = {
                type ,
                appkey ,
                master_sercet
            };      
            if(this.groupList[index].id){
                body.id = data.id;
                api.updatePushConfig(body).then(res=>{
                    if(res.data.code==200){
                        this.$message({showClose: true,message:'更新成功！'});
                    }   
                })
            }else{
                this.addPushConfig(body);
            }    
        },
        //添加更新设置
        addPushConfig(body){
            api.addPushConfig(body).then(res=>{
                if(res.data.code==200){
                    this.$message({showClose: true,message:'添加成功！'});
                }
            })
        }
    }
    
}
</script>

<style lang="less" scoped>
.config_set{
    // height:100%;
    background:#fff;

    .title-info{
        padding:20px;
        font-size:14px;
        color: #666;
        border-bottom:1px solid #ddd;
        .add-btn{
            padding: 6px 12px;
        }
    }
    .content{
        height:400px;
        padding:40px;
        .group{
            margin-top:10px;
            .item-list{
                display:inline-block;
                .el-input,.el-select{
                    width:130px;
                }  
            }
            .delete-icon{
                margin-left:10px;
            }
        }
    }
}
</style>
